<template>

    <el-dialog :title="id == null ? '用户添加' : '用户编辑'" :visible.sync="dialogVisible" :close-on-click-modal="false">

      <el-form ref="main-form" status-icon :model="mainQuery" :rules="rules" label-width="80px" label-position="left" :inline="false" style="width: 400px;">
        <el-form-item label="用户ID" size="mini" v-if="id != null">
          <el-input placeholder="" onfocus="this.select()" v-model="id" readonly></el-input>
        </el-form-item>
        <el-form-item label="用户名" size="mini" prop="username">
          <el-input placeholder="" v-model="mainQuery.username" @keyup.enter.native="submit" clearable></el-input>
        </el-form-item>
        <el-form-item label="密码" size="mini" prop="password">
          <el-input placeholder="" type="password" v-model="mainQuery.password" @keyup.enter.native="submit" clearable></el-input>
        </el-form-item>
        <el-form-item label="确认密码" size="mini" prop="passwordConfirm">
          <el-input placeholder="" type="password" v-model="mainQuery.passwordConfirm" @keyup.enter.native="submit" clearable></el-input>
        </el-form-item>
        <el-form-item label="昵称" size="mini" prop="nick">
          <el-input placeholder="" v-model="mainQuery.nick" @keyup.enter.native="submit" clearable></el-input>
        </el-form-item>
        <el-form-item label="真实姓名" size="mini" prop="realname">
          <el-input placeholder="" v-model="mainQuery.realname" @keyup.enter.native="submit" clearable></el-input>
        </el-form-item>
        <el-form-item label="手机号码" size="mini" prop="mobile">
          <el-input placeholder="" v-model="mainQuery.mobile" @keyup.enter.native="submit" clearable></el-input>
        </el-form-item>
        <el-form-item label="Email" size="mini" prop="mail">
          <el-input placeholder="" v-model="mainQuery.mail" @keyup.enter.native="submit" clearable></el-input>
        </el-form-item>
        <el-form-item label="用户角色" size="mini" prop="roleId">
          <el-select v-model="mainQuery.roleId" placeholder="未选择" clearable>
            <el-option
              v-for="item in roleOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="用户状态" size="mini" prop="status">
          <el-select v-model="mainQuery.status" placeholder="未选择" clearable>
            <el-option
              v-for="item in statusOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="创建时间" size="mini" v-if="data != null">
          <el-input placeholder="" v-model="data.createTime" readonly></el-input>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">

        <!-- <el-popover
          v-if="id != null"
          placement="top"
          width="160"
          v-model="popDeleteVisible">
          <p>确定删除吗？</p>
          <div style="text-align: right; margin: 0">
            <el-button size="mini" type="default" @click="popDeleteVisible = false">取消</el-button>
            <el-button type="danger" size="mini" @click="submitDel">确定</el-button>
          </div>
          <el-button type="danger" slot="reference"  size="small" style="float: left;" :loading="loading">删 除</el-button>
        </el-popover> -->

        <el-button @click="close" size="mini">取 消</el-button>
        <el-button @click="submit" size="mini" type="primary" :loading="loading">提 交</el-button>
      </div>
    </el-dialog>

</template>

<script>

import ApiMain from '@/api/system.member';

export default {
  mixins: [
  ],
  props: [
    'statusOptions',
    'roleOptions',
  ],
  data () {
    return {

      dialogVisible   : false,
      popDeleteVisible: false,
      loading         : false,

      mainQuery: {
        username       : '',
        password       : '',
        passwordConfirm: '',

        nick    : '',
        realname: '',
        mail    : '',
        mobile  : '',
        roleId  : '',
        status  : '',
      },

      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 4, max: 99, message: '长度在 4 到 99 个字符', trigger: 'blur' }
        ],
        nick: [
          { required: true, message: '请输入昵称', trigger: 'blur' },
        ],
        realname: [
          { required: true, message: '请输入真实姓名', trigger: 'blur' },
        ],
        mobile: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
        ],
        status: [
          { required: true, message: '请选择用户状态', trigger: 'blur' },
        ],

        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
        ],

        passwordConfirm: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { 
            validator: (rule, value, callback) => {
              if (value !== this.mainQuery.password) {
                callback(new Error('两次输入密码不一致'));
              }
              else {
                callback();
              }
            }, 
            trigger: 'blur' 
          },
        ],
      },

      id  : null,
      data: null,
    }
  },
  mounted () {
  },

  methods: {

    show (id = null) {

      this.reset();

      if (id) {
        this.id = id;
        this.fetchData();
      }

      this.dialogVisible = true;
    },

    close () {
      this.dialogVisible = false;
      this.$emit('dialog-close');
    },

    reset () {
      this.$refs['main-form'] && this.$refs['main-form'].resetFields();
      this.id   = null;
      this.data = null;
    },

    fetchData () {

      ApiMain.info({id: this.id})
      .then(re => {
        this.data = re; 
      })
      .catch(() => {
        this.data = null;
      })
      .finally(() => {
        this.renderData();
      });
    },

    renderData () {

      this.mainQuery.username = this.data.username;
      this.mainQuery.realname = this.data.realname;
      this.mainQuery.nick     = this.data.nick;
      this.mainQuery.mail     = this.data.mail;
      this.mainQuery.mobile   = this.data.mobile;
      this.mainQuery.roleId   = this.data.roleId;
      this.mainQuery.status   = this.data.status;

    },

    verifyForm () {

      return true;

      var bool = true;
      this.$refs['main-form'].validate((valid) => bool = valid);
      return bool;
    },

    async submit () {

      if (! this.verifyForm()) return false;

      this.loading = true;

      try {
        await ApiMain.add(this.mainQuery);
        this.$message({message: '添加成功', type: 'success'});
        this.close();
      } catch (err) {}

      this.loading = false;
    },

    async submitDel () {

    },
  }
}
</script>

<style>

</style>
